<template>
	<div>
		 <div style="z-index: 2;display: flex;justify-content: flex-start;
		background-color: rgb(243, 244, 246);
		height: 11%;
		position: fixed;top: 0;left: 0;width: 100%;
		border-bottom:0.5px solid #c3b2bb;align-items: center;">
			<div style="font-size: 20px;margin-left: 0px;height: 11vh;
		text-align: center;width: 100px;line-height: 11vh;" @click="gotohome()">Aria</div>
			<form
				style="display: flex;align-items: center;margin-left: 150px;height: 11vh;display: flex;justify-content: flex-start;">
				<div class="inputBox">
					<input id="inputtop" type="text" placeholder="">
				</div>
				<span style="width: 10px;"></span>
				<div class="inputBox">
					<input type="submit" value="检索">
				</div>
			</form>
			<span style="width: 20%;"></span>
			<div style="height: 11vh;align-items: center;line-height: 11vh;">{{this.$store.state.borderflag}}</div>
			<span style="width: 5%;"></span>
			<div style="line-height: 11vh;">欢迎，{{this.$store.state.username}}</div>
			<span style="width: 60px;"></span>
			<el-dropdown @command="handleCommand">
				<span class="el-dropdown-link">
					<i class="el-icon-arrow-down el-icon--right" style="color: #000000;"></i>
				</span>
				<el-dropdown-menu slot="dropdown" >
					<el-dropdown-item command="a">个人中心</el-dropdown-item>
					<el-dropdown-item command="b">门户系统</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<button class="logout" style="height: 40px;position: absolute;right:30px;" @click="outLogin">退出登录</button>
		</div>
		<!-- <div class="aa">
			<div style="width: 65%">&nbsp;</div>
			<ul>
				<li v-if="this.$store.state.isLogin===true">欢迎，{{this.$store.state.username}}</li>
				<li v-if="this.$store.state.isLogin===false"></li>
				<li v-if="this.$store.state.isLogin===true" @click="outLogin()">退出登录</li>
				<li v-if="this.$store.state.isLogin===false" @click="gotoLogin()"><i
						class="el-icon-user-solid"></i>&nbsp;&nbsp;&nbsp;&nbsp;登录</li>
				<li><i class="el-icon-key"></i>&nbsp;&nbsp;&nbsp;&nbsp;认证</li>
			</ul>
		</div> -->
	</div>
</template>

<script>


	export default {

		name: 'Home',
		methods: {
			gotohome(){
				this.$router.push('/')
			},
			changePageToSch() {
				this.$router.push("/scholarpage");
			},
			handleScrollx() {
				// console.log('滚动高度',window.pageYOffset)
				// console.log('距离顶部高度',this.$refs.pronbit.getBoundingClientRect().top)
				var detah = this.$refs.pronbit.getBoundingClientRect().top
				if (detah <= 300) {
					var ele = document.getElementById("movebox");
					ele.style.backgroundColor = 'red';
				} else {
					var ele = document.getElementById("movebox");
					ele.style.backgroundColor = 'green';
				}
			},
			testclick() {
				// var a = document.getElementById("searchBtn")
				// this.axios({
				// 	method: 'post',
				// 	url: '/searchtest/',
				// 	data: {
				// 		'keyword': a.value
				// 	},
				// 	headers: {
				// 		'X-CSRFToken': this.getCookie('csrftoken')
				// 	},
				// }).then(res => {
				// 	var obj = JSON.parse(res.data);
				// 	//[['文件名','作者名',...],[],[]]
				// 	for (let i = 0; i < obj.length - 1; i++) {
				// 		console.log(obj[i]);
				// 	}
				// })
			
				this.$router.push("/search/" + this.search_text)
			},
			getCookie(name) {
				var value = '; ' + document.cookie;
				var parts = value.split('; ' + name + '=');
				if (parts.length === 2) return parts.pop().split(';').shift();
			},
			handleCommand(command) {
				if (command === "a") {
			
					if (this.$store.useremail !== '') {
						const self = this;
						self.axios({
							method: 'post',
							url: '/personalpage/personalmsg',
							headers: {
								'X-CSRFToken': this.getCookie('csrftoken')
							},
							data: {
								email: this.$store.useremail,
			
							},
						}).then(res => {
							var obj = res.data;
							this.$store.username = obj.username;
							this.$store.userphone = obj.userphone;
							//console.log(obj)
							this.$message({
								message: '成功获取用户信息',
								type: 'success'
							});
							this.$router.push('/personalpage');
						})
			
					} else {
						this.$message({
							showClose: true,
							message: '请先登录！'
						});
					}
			
			
				} else if (command === "b") {
					this.$router.push("/scholarpage");
				}
			},
			mouseOver() {
				this.classObject.active1 = true;
				console.log("hello");
			},
			mouseDown() {
				this.classObject.active1 = false;
			},
			changepagetoperson() {
				//console.log('heiheihi诶嘿IE')
				this.$router.push({
					path: '/personalpage'
				});
				localStorage.setItem("show_num", "1");
			},
			changepagetoperson_collection() {
				this.$router.push({
					path: '/personalpage/personalcollect'
				});
				localStorage.setItem("show_num", "2");
			},
			gotoLogin() {
				this.$router.push("/login");
			},
			outLogin() {
			
				this.$store.state.isLogin = false;
				const self = this;
				this.isLogin = false;
				this.$store.username = '',
					this.$store.useremail = '',
					this.$store.userphone = '',
			
					self.axios({
						method: 'post',
						url: '/outlogin/',
						data: {
							'username': this.$store.state.username
						},
						headers: {
							'X-CSRFToken': this.getCookie('csrftoken')
						},
					})
				this.$store.state.username = "";
				this.gotohome()
			},
			
		},
		}
	
</script>
<style>
	body {
		margin: 0;
		padding: 0;
	}
	
	.down {
		margin-top: 18vh;
		margin-left: 50vw;
		/* margin-top: 25vh; */
		/* transform: translate(-50%, -50%); */
		color: #fff;
		width: 40px;
		height: 40px;
	
	}
	
	.down i {
		font-size: 20px;
		cursor: pointer;
	}
	
	.aa {
		/* background-color: green; */
		/* opacity: 0.5; */
		height: 60px;
		width: 100%;
		/* top:0;
		position: fixed; */
		/* border: solid ; */
		color: #fff;
		background-color: rgba(255, 255, 255, 0.15);
		align-items: center;
		display: flex;
	}
	
	.bb {
		background: url(../assets/2.jpg) no-repeat;
		background-size: 100%;
	}
	
	ul {
		list-style: none;
	}
	
	ul li {
		cursor: pointer;
		font-size: 1.5ch;
		display: inline-block;
		margin-left: 40px;
		margin-right: 40px;
		color: #EEEEEE;
	}
	
	ul li:hover {
		color: #FFFFFF;
	}
	
	.slogan {
		margin-left: 50vw;
		margin-top: 25vh;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		width: 25vw;
		height: 25vh;
		border: solid #fff;
		letter-spacing: 10px;
		font-size: 8ch;
	}
	
	.form {
		margin-left: 50vw;
		/* margin-top: 25vh; */
		transform: translate(-50%, -50%);
		display: flex;
		width: 454px;
		height: 42px;
		/* background: rgba(0, 0, 0, 0.2); */
		padding: 15px;
		border: none;
		border-radius: 5px;
	}
	
	.form input {
		display: inline-block;
		width: 400px;
		height: 40px;
		background-color: transparent;
		border: solid #fff 2px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";
		font-style: italic;
		outline: none;
	}
	
	.form button {
		/*display:inline-block;*/
		display: inline-block;
		width: 112px;
		height: 44px;
		/* background-color: transparent; */
		background-color: rgb(72, 24, 245);
		color: #fff;
		/* border: solid #fff 2px; */
		border: none;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		position: relative;
		font-size: 16px;
		font-weight: bold;
		cursor: pointer;
	}
	
	/*添加三角符号*/
	.form button:before {
		content: "";
		border-width: 6px;
		border-style: solid;
		/* border-color: transparent #d93c3c transparent transparent; */
		border-color: transparent rgb(72, 24, 245) transparent transparent;
		position: absolute;
		right: 100%;
		top: 38%;
	}
	
	.form input:hover {
		background-color: wheat;
	}
	
	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}
	
	.el-icon-arrow-down {
		font-size: 12px;
	}
	
	.active1 {
		background-color: #409EFF
	}
	
	.shade {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5)
	}
	
	
	.inputBox input[type="button"] {
		background: #fff;
		color: #666;
		width: 75px;
	
		/* margin-bottom: 20px; */
		font-weight: 600;
		cursor: pointer;
	}
	
	.scroll {
		margin: auto;
		overflow: auto;
	
	}
	
	.scroll::-webkit-scrollbar {
	
		width: 10px;
	
		height: 10px;
	
	}
	
	/*正常情况下滑块的样式*/
	
	.scroll::-webkit-scrollbar-thumb {
	
		background-color: rgba(0, 0, 0, .05);
	
		border-radius: 10px;
	
		-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
	
	}
	
	/*鼠标悬浮在该类指向的控件上时滑块的样式*/
	
	.scroll:hover::-webkit-scrollbar-thumb {
	
		background-color: rgba(0, 0, 0, .2);
	
		border-radius: 10px;
	
		-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
	
	}
	
	/*鼠标悬浮在滑块上时滑块的样式*/
	
	.scroll::-webkit-scrollbar-thumb:hover {
	
		background-color: rgba(0, 0, 0, .4);
	
		-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
	
	}
	
	/*正常时候的主干部分*/
	
	.scroll::-webkit-scrollbar-track {
	
		border-radius: 10px;
	
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
	
		background-color: white;
	
	}
	
	/*鼠标悬浮在滚动条上的主干部分*/
	
	.scroll::-webkit-scrollbar-track:hover {
	
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
	
		background-color: rgba(0, 0, 0, .01);
	
	}
	
	.jump {
		/* background: transparent; */
		border: 0;
		border-radius: 0;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 20px;
		padding: 15px 50px;
		position: relative;
		cursor: pointer;
	}
	
	.jump:before {
		transition: all 0.5s cubic-bezier(0.7, -0.5, 0.1, 1);
		content: "";
		width: 1%;
		height: 100%;
		background: #00ffff;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.jump:hover:before {
		background: #00ffff;
		width: 100%;
	}
	
	
	.jump span {
		/* mix-blend-mode: darken; */
		color: #fff;
		background-color: #000;
	}
	
	.jump:hover span {
		mix-blend-mode: darken;
		color: #000;
		background-color: #fff;
	}
	
	.jump:nth-child(1):before {
		background: #7986ca;
	}
	
	.jump:nth-child(1):hover:before {
		background: #7986ca;
		width: 100%;
	}
	
	.jump:nth-child(2):before {
		background: #afd7f7;
	}
	
	.jump:nth-child(2):hover:before {
		background: #afd7f7;
		width: 100%;
	}
	
	.jump:nth-child(3):before {
		background: #c8b4e1;
	}
	
	.jump:nth-child(3):hover:before {
		background: #c8b4e1;
		width: 100%;
	}
	
	.jump:nth-child(4):before {
		background: #e6c9e1;
	}
	
	.jump:nth-child(4):hover:before {
		background: #e6c9e1;
		width: 100%;
	}
</style>